<template>
  <n-config-provider id="body w-full" :theme-overrides="naiveTheme"
                     style="min-width: 1100px;"
  >
    <module-header name="analysis" value="/analysis" is-telescreen />
    <main-content>
      <div style="margin-bottom: 50px;">
        <n-h2>
          选择事件
        </n-h2>
        <n-space vertical>
          <div style="display: flex">
            <n-h4>&nbsp;&nbsp;&nbsp;目标转化事件</n-h4>
            &nbsp;&nbsp;&nbsp;
            <n-select v-model:value="value" :options="options" style="width:400px"/>
          </div>
          <div style="display: flex">
            <n-h4>&nbsp;&nbsp;&nbsp;待归因事件</n-h4>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <n-select v-model:value="value" :options="options" style="width:400px"/>
          </div>
        </n-space>
        <n-divider />
        <n-space>
          <n-h3>分析方法</n-h3>
          <n-select v-model:value="value" :options="options" style="width:400px"/>
          <n-h3>归因窗口期</n-h3>
          <n-select v-model:value="value" :options="options" style="width:50px"/>
          <n-h3>天</n-h3>
          <n-button type="primary" class="absolute right-0" >
            查询
          </n-button>
        </n-space>
      </div>
      <div>
        <n-date-picker v-model:value="range" type="daterange" style="width:400px;margin-bottom:25px" clearable />
      <n-data-table v-model:checked-row-keys="checkedRowKeys"
                    :columns="columns"
                    :data="data"
                    :pagination="pagination"
                    :on-update:page="pageUpdate"/>
      </div>
    </main-content>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { naiveTheme } from '../../shared/theme/naive_theme'
import { NConfigProvider,NDataTable,DataTableColumns,NDatePicker,NDivider,NSpace,NSelect,NH2,NButton,NH4,NH3} from 'naive-ui'
import { nav } from '../../shared/client/window'
import { axiosReq } from '../../shared/client/axios'
import { actErr } from '../../shared/client/interact'
import ModuleHeader from '../../components/common/module_header.vue'
import MainContent from '../../components/common/main_content.vue'

const value= ref(null)

const range = ref<[number, number]>([1183135260000, Date.now()])

const pagination = {
  pageSize: 3
}

const checkedRowKeys = ref<Array<string | number>>([])

  type RowData = {
    key: number,
    work: string,
    click: string,
    valuable: string,
    target:string,
    donate:string
}

async function pageUpdate(value) {
  
}

const columns : DataTableColumns<RowData> = [
        {
          type: 'selection',
          options: [
            'all',
            'none',
          ]
        },
        {
          title: '待归因事件',
          key: 'work'
        },
        {
          title: '点击次数',
          key: 'click'
        },
        {
          title: '有效转化点击',
          key: 'valuable'
        },
        {
          title: '目标事件次数',
          key: 'target'
        },
        {
          title: '贡献度',
          key: 'donate'
        }
      ]
 const  data= [
        {
          key: 0,
          work:'注册',
          click:'11,293',
          valuable:'1,193',
          target:'4,525',
          donate:''
        },
        {
          key:1
        }
      ]
 const  options= [
        {
          label: "Everybody's Got Something to Hide Except Me and My Monkey",
          value: 'song0',
          disabled: true
        },
        {
          label: 'Drive My Car',
          value: 'song1'
        },
        {
          label: 'Norwegian Wood',
          value: 'song2'
        },
        {
          label: "You Won't See",
          value: 'song3',
          disabled: true
        },
        {
          label: 'Nowhere Man',
          value: 'song4'
        },
        {
          label: 'Think For Yourself',
          value: 'song5'
        },
        {
          label: 'The Word',
          value: 'song6'
        },
        {
          label: 'Michelle',
          value: 'song7',
          disabled: true
        },
        {
          label: 'What goes on',
          value: 'song8'
        },
        {
          label: 'Girl',
          value: 'song9'
        },
        {
          label: "I'm looking through you",
          value: 'song10'
        },
        {
          label: 'In My Life',
          value: 'song11'
        },
        {
          label: 'Wait',
          value: 'song12'
        }
      ]
</script>

<style>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
</style>
